<!DOCTYPE html>
<html>
	<head>
		<title>读取上传的图片</title>
	</head>
	<body>
		<input type="file" id="selectFiles" onchange="dealSelectFiles()" multiple webkitdirectory>
		<canvas id="myCanvas" width=1440 height=900></canvas>
	 
		<script type="text/javascript">
			// var file = new File("宋燚_20190221142627.jpg","人物正像/宋燚_20190221142627.jpg");
			var imgPosX = 0;
			var imgWidth = 256;
			function dealSelectFiles(){
				/// get select files.
				var selectFiles = document.getElementById("selectFiles").files;
				console.log(selectFiles);
				console.log(selectFiles[0]);
				
				for(var file of selectFiles){
					console.log(file.webkitRelativePath);
	 
					/// read file content.
					var reader = new FileReader();
					reader.readAsDataURL(file);
	 
					reader.onloadend = function(){
						/// deal data.
						var img = new Image();
						/// after loader, result storage the file content result.
						img.src = this.result;	
						img.onload = function(){
							var myCanvas = document.getElementById("myCanvas");
							var cxt = myCanvas.getContext('2d');
	 
							cxt.drawImage(img, imgPosX, 0);
							imgPosX += imgWidth;
						}
					}
				}
			}
		</script>
	</body>
</html>
